import React,{Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    Navigator,
    Image,
    ScrollView,
    Alert,
}from 'react-native';
import CheckBox from 'react-native-check-box';
import NavigationBar from '../../common/NavigationBar';
import ViewUtils from '../../util/ViewUtils';
import ArrayUtils from '../../util/ArrayUtils';
import LanguageDao, { FLAG_LANGUAGE } from '../../expand/dao/LanguageDao';
export default class WelcomePage extends Component{
    constructor(props) {
        super(props);
        this.languageDao=new LanguageDao(FLAG_LANGUAGE.flag_key);
        this.changeValues = [];
        this.isRemoveKey=this.props.isRemoveKey?true:false;//是否是标签的移除页
        this.state={
            dataArray:[],
        }
    }
    componentDidMount(){ 
      this.loadData();
    }
    loadData() {
        this.languageDao.fetch()
            .then(result=>{
                this.setState({
                    dataArray:result
                })
            })
            .catch(error=>{
                console.log(error);
            })
    }
    onBack() {
        if (this.changeValues.length > 0) {
            Alert.alert(
                '提示',
                '要保存修改吗?',
                [
                    {
                        text: '否', onPress: () => {
                        this.props.navigator.pop();
                    }
                    }, {
                    text: '是', onPress: () => {
                        this.onSave();
                    }
                }
                ]
            )
        } else {
            this.props.navigator.pop();
        }
    }
    onClick(data) {
        if(!this.isRemoveKey){
            data.checked = !data.checked;
            ArrayUtils.updateArray(this.changeValues, data);
        }
        
    }
    onSave() {
        if (this.changeValues.length === 0) {
            this.props.navigator.pop();
            return;
        }
        //将发生变化的标签移除并保存
        if(this.isRemoveKey){
        for(let i=0,l=this.changeValues.length;i<l;i++){
            ArrayUtils.remove(this.state.dataArray,this.changeValues[i]);
            this.languageDao.save(this.state.dataArray);
            this.props.navigator.pop();
        }
       }
        this.languageDao.save(this.state.dataArray);
        this.props.navigator.pop();
    }
    renderView() {
        if (!this.state.dataArray || this.state.dataArray.length === 0)return;
        var len = this.state.dataArray.length;
        var views = [];
        for (var i = 0, l = len - 2; i < l; i += 2) {
            views.push(
                <View key={i}>
                    <View style={styles.item}>
                        {this.renderCheckBox(this.state.dataArray[i])}
                        {this.renderCheckBox(this.state.dataArray[i + 1])}
                    </View>
                    <View style={styles.line}/>
                </View>
            )
        }
        views.push(
            <View key={len - 1}>
                <View style={styles.item}>
                    {len % 2 === 0 ? this.renderCheckBox(this.state.dataArray[len - 2]) : null}
                    {this.renderCheckBox(this.state.dataArray[len - 1])}
                </View>
            </View>
        )
        return views;
        }
        renderCheckBox(data) {
            let leftText = data.name;
            let isChecked = this.isRemoveKey ? false : data.checked;
            return (
                <CheckBox
                    style={{flex: 1, padding: 10}}
                    onClick={()=>this.onClick(data)}
                    isChecked={isChecked}
                    leftText={leftText}
                    checkedImage={<Image source={require('../../pages/my/img/ic_check_box.png')}
                                        style={{tintColor:"#6495ed"}}/>}
                    unCheckedImage={<Image source={require('../../pages/my/img/ic_check_box_outline_blank.png')}
                                        style={{tintColor:"#6495ed"}}/>}
                />);
        }
    render() {
        let title = this.isRemoveKey? '标签移除' : '自定义标签';
        let rightButtonTitle = this.isRemoveKey?'移除' : '保存';
        let navigationBar=
                <NavigationBar
                        title={title}
                        style={{backgroundColor:"#6495ED"}}
                        leftButton={ViewUtils.getLeftButton(()=>this.onBack())}
                        rightButton={ViewUtils.getRightButton(rightButtonTitle,()=>this.onSave())}
                        />
        return <View style={styles.container}>
                 {navigationBar}
                <ScrollView>
                   {this.renderView()}   
                </ScrollView> 
            </View>
    }

}
const styles = StyleSheet.create({
    container:{
        flex:1,
    },
    item: {
        flexDirection: 'row',
    },
    line: { 
        flex: 1,
        height: 0.3,
        backgroundColor: 'black',
    }
})